<template>
  <div class="home">
    <el-button @click="click1">Click Me</el-button>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
  },
  data:function () {
   return {
     show:true,
     items: [1,2,3,4,5,6,7,8,9],
     nextNum: 10
   }
  },
  methods:{
    click1(){
      const h = this.$createElement;
      this.$message({
        message: h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ]),
        duration:0,
        showClose:true,
      });
    }
  }
}
</script>

<style>
  p{transition: 20s}
  .home{overflow: hidden;}
  @keyframes k_scale{
    0% {color: #f00;transform:scale(1.0);}
    50% {color: #ff0;transform: scale(1.5)}
    100% {color: #f0f;transform: scale(1.0)}
  }
  .frames{animation:k_scale 2000ms ease infinite alternate;}
  .v-move{transition:20s}
  .v-leave-active {position: absolute;}
  .v-enter,.v-leave{transform: translateX(100px);opacity: 0;}
  p{color: #198ccc;}
</style>
